

    <table id="test" lay-filter="tt"></table>

    <script>
        var  id;//定义全局变量
        var tableIns;//全局变量，实例化后的表格
        layui.use(["table","layer"],function () {
            var table=layui.table,layer=layui.layer;

            tableIns=  table.render({
                elem: '#test'
                ,url:'testServlet'
                ,where:{"opr":"list"}
                ,page:true
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                    {field:'id', width:80, title: 'ID', sort: true}
                    ,{field:'name', width:80, title: '角色名称', sort: true}
                    ,{fixed:'right',width:178,align:'center',toolbar:'#barDemo'}
                ]]
            });

           //监听工具条
            table.on('tool(tt)', function(obj){
                var data = obj.data;
                if(obj.event === 'detail'){
                    layer.msg('ID：'+ data.id + ' 的查看操作');
                } else if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){//监听工具条的修改按钮
                  id=data.id;//给全局变量进赋值
                  layer.open({
                      type:2,
                      content:"testAddOrUpdate.html"//打开修改页面
                  });
                }
            });
        });
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
